<template>
  <div id="app">
    <!-- 顶部导航栏，可根据不同页面调整显示，这里简单示例 -->
    <div class="top-nav" v-if="!isProfilePage">
      <router-link to="/discover" class="nav-link" :class="{ active: currentRoute === 'discover' }">发现</router-link>
      <router-link to="/channel" class="nav-link" :class="{ active: currentRoute === 'channel' }">频道</router-link>
      <router-link to="/mine" class="nav-link" :class="{ active: currentRoute === 'mine' }">我的</router-link>
      <a href="https://gitee.com/state2023/front-end-operation" target="_blank" class="nav-link">仓库</a>
      <button class="search-btn" @click="goSearchPanel">搜索</button>
    </div>
    <router-view></router-view>
  </div>
</template>


<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, watch } from 'vue'

const route = useRoute()
const router = useRouter()
const currentRoute = ref('')
const isProfilePage = ref(false)

watch(() => route.path, (newPath) => {
  currentRoute.value = newPath.replace('/', '')
  isProfilePage.value = newPath === '/profile'
})

const goSearchPanel = () => {
  router.push('/search-panel')
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.top-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #333;
  padding: 10px 0;
}
.nav-link {
  color: #fff;
  text-decoration: none;
  padding: 5px 10px;
}
.nav-link.active {
  color: #ffd700;
}
.search-btn {
  background-color: #666;
  color: #fff;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
}
</style>
